<template>
  <div class="myAppointment">
      <!-- 新建有约 -->
      <div class="newAppoint">
        <div class="leftBtn" @click="apply()">
          我的有约邀请
        </div>
        <div class="rightBtn"><img @click="$router.push({path:'/appointment/new',query:{type:'2'}})" src="./img/new.png"></div>
          <!-- <img @click="showPop=true" src="./img/new.png"></div> -->
         <!-- <yd-popup v-model="showPop" position="center" width="90%" class="mypop"> -->
           <!-- <div class="btns">
             <p><button @click="oto">一对一有约</button></p>
              <p> <button @click="otf">群约</button> </p>     
           </div> -->
         <!-- </yd-popup> -->
      </div>
      <!-- 下方菜单 -->
      <div class="listContainer">
        <!-- 群约 -->
        <div class="group">
          <div class="item" v-for="(gro,gri) in group" :key="gri" @click="tomap(gri)">
            <div class="left">
              <img src="./img/family.png">
            </div>
            <div class="mid">
              <p style="color:#000000">{{gro.event}}</p>
              <p>{{gro.appointStartTime}}———{{gro.appointEndTime}}</p>
            </div>
            <div class="right">
              <yd-icon name="poisition"  slot="icon" custom size="25px" v-show="gro.gps" color="#000000"></yd-icon>
              <yd-icon name="poisition"  slot="icon" custom size="25px" v-show="!gro.gps" color="#eeeeee"></yd-icon>
            </div>
          </div>
        </div>
          <!-- 单人约 -->
          <!-- <div class="twolist">
            <div class="item" v-for="(per,pi) of list" :key="pi" v-if="per.appointMembers.length==2">
               <div class="left">
                  <img src="./img/family.png"> 
                </div> 
                <div class="mid">
                  <p>{{per.event}}</p>
                  <p>{{per.appointStartTime}}———{{per.appointEndTime}}</p>
                </div>
                <div class="right">
                  <yd-icon name="poisition"  slot="icon" custom size="25px" v-show="per.gps"></yd-icon>
                  <yd-icon name="poisition"  slot="icon" custom size="25px" v-show="!per.gps" color="#000000"></yd-icon>
                </div>
            </div> -->
          <!-- </div> -->
      </div>
  </div>
</template>
<script>
import {getDate} from '@/common/js/base/time.js'
export default {
  data(){
    return{
      showPop:false,//弹出窗
      group:[

      ],
      list:[
       
      ],
    }
  },
  methods:{
    oto(){//一对一
      this.$router.push({path:"/appointment/new",query:{type:"1"}})
      this.showPop=false
    },
    otf(){//多人约
      this.$router.push({path:"/appointment/new",query:{type:"2"}})
      this.showPop=false      
    },
    apply(){//跳转我的申请列表
      this.$router.push({path:"/appointment/apply"})
    },
    tomap(index){//跳转有约地图
    // console.log(this.group[index])
    this.$store.commit("choseGroup",this.group[index])
      // this.$router.push({path:"/appointment/map"})
      let data={
        appointID:this.group[index].appointID
      }
      this.ylAjax.appointMap(data)
          .then(res=>{
            if(res.state==0){
              console.log(res.data)
              this.$router.push({path:"/appointment/map"})
              this.$store.commit("mapdata",res.data)
            }
          })
    },
    upadte(){//查看自己的有约
       let data={
         userID:localStorage.userid
       }
       let that=this
       this.ylAjax.getJoinedAppoints(data)
                  .then(res=>{
                      let a=res.data;
                      console.log(a)
                      // 暂时不需要
                      // for(let i=0;i<a.length;i++){
                      //   let b=getDate(a[i].appointEndTime)
                      //   let c=getDate(a[i].appointStartTime)
                      //   a[i].appointEndTime=b.mounth+"月"+b.day+"日"+" "+b.hours+":"+b.minutes
                      //   a[i].appointStartTime=c.mounth+"月"+c.day+"日"+" "+c.hours+":"+c.minutes
                      //   if(a[i].appointType==1){
                      //     that.list.push(a[i])
                      //   }else if(a[i].appointType==2){
                      //     that.group.push(a[i])
                      //   }
                      // }
                      for(let i=0;i<a.length;i++){
                        let b=getDate(a[i].appointEndTime)
                        let c=getDate(a[i].appointStartTime)
                        a[i].appointEndTime=b.mounth+"月"+b.day+"日"+" "+b.hours+":"+b.minutes
                        a[i].appointStartTime=c.mounth+"月"+c.day+"日"+" "+c.hours+":"+c.minutes                        
                      }
                   setTimeout(()=>{
                     that.group=a
                   },500)
                  })
    }
  },
  created(){
    this.upadte()    
  },
}
</script>
<style lang="less" scoped>
  @import "~less/base";
  .myAppointment{//容器
      img{
        max-width: 100%;
        max-height: 100%;
      }
      .newAppoint{//新建有约
        height: 1.2rem;
        line-height: .9rem;
        display: flex;
        border-bottom: 1px solid @color-border4;
        .leftBtn{
          flex: 0 0 50%;
          text-align: center;
          border-right: 1px solid @color-border4;
          margin-top: .3rem;
        }
        .rightBtn{//新建有约
          flex: 0 0 50%;
          text-align:right;
          padding-right: .64rem;
          margin-top: .3rem;
          img{
            height: .4rem;
          }
        }
        .mypop{//弹出菜单
          .btns{
            padding: .5rem 0;
            text-align: center;
            button{
              width: 60%;
              height: .8rem;
              border-radius: 5px;
              background-color: @background-a;
              color: @color-t;
              font-size: 14px;
            }
          }
        }
      }
      .listContainer{//下方列表
        position: absolute;
        top:2.2rem;
        bottom: 0;
        left: 0;
        right: 0;
        overflow-y: scroll;
        .item{//群约，个人约--统一样式
          display: flex;
          height: 1.22rem;
          // line-height: 1.22rem;
          .left{//头像
            flex: 0 0 20%;
            line-height: 1.22rem;
            text-align: center;
            img{
              height: .92rem;
              border-radius: 50%;
              border: 2px solid @color-border5;
              vertical-align:middle;
            }
          }
          .mid{//内容
            flex: 0 0 60%;
            line-height: .61rem;
          }
          .right{//右侧位置
            flex: 0 0 20%;
            text-align: center;
            line-height: 1.22rem;
          }
        }
        .group .item{
           color: @color-t;
           background-color: @background-a;
           border-bottom: 1px solid @color-border2;
        }
        .twolist .item{
           border-bottom: 1px solid @color-border4;
        }
      }
  }
</style>
